<template>
  <section>
    <!--工具条-->
    <!--<el-col :span="24" class="toolbar">-->
    <!--<el-form :inline="true" :model="formInline" class="demo-form-inline">-->
    <!--<el-form-item>-->
    <!--<el-input v-model="formInline.user" placeholder="姓名"></el-input>-->
    <!--</el-form-item>-->
    <!--</el-form>-->
    <!--</el-col>-->

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%">
      <el-table-column label="Task">
        <el-table-column label="Name" prop="id">
          <template scope="scope">
            <router-link
              :to="{path : `page335`, query:{application_id:`${application_id}`,job_id:`${query.job_id}`,task_id:`${scope.row.id}`,user:`${query.user}`}}">
              {{scope.row.id}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="State" prop="state"></el-table-column>
        <el-table-column label="Start Time" prop="startTime">
          <template scope="scope">
            {{scope.row.startTime |toTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="Finsh Time" prop="finishTime">
          <template scope="scope">
            {{scope.row.finishTime |toTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="Elapsed Time" prop="elapsedTime">
          <template scope="scope">
            {{scope.row.elapsedTime | toSec}}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="Successful Attempt">
        <el-table-column label="Start Time" prop="startTime">
          <template scope="scope">
            {{scope.row.startTime | toTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="Finsh Time" prop="finishTime">
          <template scope="scope">
            {{scope.row.finishTime | toTimeStr}}
          </template>
        </el-table-column>
        <el-table-column label="Elapsed Time" prop="elapsedTime">
          <template scope="scope">
            {{scope.row.elapsedTime | toSec}}
          </template>
        </el-table-column>
      </el-table-column>

    </el-table>
    <!--分页-->
    <!--<el-col :span="24" class="toolbar" style="padding-bottom:10px;">
      <el-pagination :current-page="1" :page-sizes="[5, 10, 20, 50]" :page-size="20"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="400" style="float:right">
      </el-pagination>
    </el-col>-->
  </section>
</template>

<script>
  import dao from '../../common/dao'

  export default {
    data() {
      return {
        logs: false,
        formInline: {user: ''},
        tableData: [],
        query: {},
        application_id: '',
      }
    },
    methods: {
      getData: function () {
        this.query = this.$store.state.route.query || {};
        let query = this.query
        let job_id = query.job_id
        let state = query.state || void 0;
        let type = (["Map","Maps"].indexOf( query.type)<0?  'r' :  'm');
        dao.getMrJobAttemptsTasks({job_id, type, state}).then(res => {
          if (res.FX.err) return false
          let results = res.body.results ||{}
          this.tableData = results.tasks ||[]
        })
      },
      handleSelectionChange: function () {
      },
    },
    mounted: function () {
      this.getData()
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 10px;
  }

  .one {
    display: inline-block;
    width: 49%;
  }

  .el-card__heade {
    padding: 7px 20px;
  }

</style>